A customised and adjustable Gauge chart

This example Gauge chart doesn't use the built-in adjusting but uses a cutom onclick event listener (which you can see below) in order to make the adjusting animated. It also uses a custom ondraw event to draw the centerpin.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.gauge.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="250" height="250" style="background-color: black; border-radius: 125px; box-shadow: 0 0 25px gray; border: 5px solid #ddd">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    gauge = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 10,
        value: 7,
        options: {
            anglesStart: RGraph.PI - (RGraph.PI / 8),
            anglesEnd: RGraph.TWOPI + (RGraph.PI / 8),
            shadow: false,
            textColor: 'white',
            tickmarksBigColor: 'white',
            tickmarksMediumColor: 'white',
            tickmarksSmallColor: 'white',
            colorsRanges: [],
            backgroundColor: 'black',
            borderInner: 'black',
            borderOuter: 'black',
            borderOutline: 'black',
            needleColors: ['red'],
            needleType: 'line',
            needleTail: true,
            needleWidth: 7,
            centerpinRadius: 0.1,
            titleTop: 'Speed',
            titleTopColor: 'white',
            labelsCentered: true,
            labelsOffset: 7,
            textAccessible: false
        }
    }).on('draw', function (obj)
    {
        // This circle becomes the border of the centerpin
        RGraph.path2(
            obj.context,
            'b a % % % % % % f %',
            obj.centerx,
            obj.centery,
            10,
            0,
            RGraph.TWOPI,
            false,
            '#aaa'
        );
    }).draw();
    
    //
    // Add a click handler to the canvas to enable adjusting
    //
    gauge.canvas.onclick = function (e)
    {
        var ca    = e.target,
            obj   = ca.__object__,
            value = obj.getValue(e);
        obj.value = value;

        obj.grow();
    }
</script>